<template>
	<view>
		<u-swipe-action>
			<u-swipe-action-item v-for="(item,index) in list" :key="index" :options="options" @click="open(item)">
				<view class="swipe-action u-border-top u-border-bottom">
					<view class="swipe-action__content">
						<image :src="`/static/mine/${item.type == '支付宝'?'zfb':'bank'}.png`" mode="heightFix" class="swipe-action__content__img" />
						<text class="swipe-action__content__text">{{ item.type == '支付宝'?item.type:item.card_type }}（{{ item.type == '支付宝'? item.account:item.card_code.substr(-4) }}）</text>
					</view>
				</view>
			</u-swipe-action-item>
		</u-swipe-action>
		
		<u-popup :show="show" :round="10" mode="center">
			<view class="pop-box">
				<view class="info">确认删除当前账号？</view>
				<view class="flex">
					<view class="close f1" @click="close">取消</view>
					<view class="f1" @click="delAccount">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: [{
                    text: '删除',
                    style: {
                        backgroundColor: '#F81313',
                    }
                }],
				list: [],
				show: false,
				id: '',
			};
		},
		onNavigationBarButtonTap(e) {
			if(e.float == "right") {
				this.$to(`/pages/mine/add_account`)
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.getAccountList();
		},
		methods: {
			async getAccountList() {
				let res = await this.$api.get('staff/account/list');
				if(res.code == 200) {
					this.list = res.data;
				}
			},
			open(v) {
				this.id = v.id;
				this.show = true;
			},
			close() {
				this.show = false;
			},
			async delAccount() {
				let res = await this.$api.post(`staff/account/delete/${this.id}`);
				this.close();
				if(res.code == 200) {
					this.getAccountList();
					uni.showToast({
						title: res.data
					});
				}
			}
		}
	};
</script>

<style lang="scss">
	.u-page {
		padding: 0;
		font-family: PingFang SC;
	}

	.u-demo-block__title {
		padding: 10px 0 2px 15px;
	}

	.swipe-action {
		&__content {
			display: flex;
			padding: 25rpx;
			align-items: center;
			&__img {
				width: 53rpx;
				height: 53rpx;
			}
			&__text {
				font-size: 29rpx;
				color: $u-main-color;
				padding-left: 30rpx;
			}
		}
	}
</style>
